<template>
    <div class="container" style="width:99%;margin-top:-25px;">
        <!-- 查询条件 -->
        <div class="query-box">
            <el-form :model="queryBox" status-icon ref="queryBox">
                <el-row>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">客户类别</div>
                            <el-form-item>
                                <el-select clearable v-model="queryBox.brType" placeholder="请选择">
                                    <el-option
                                        v-for="item in br_type_options"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">客户来源</div>
                            <el-select
                                filterable
                                clearable
                                v-model="queryBox.dataFrom"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in student_data_from_options"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key"
                                >{{item.value}}</el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">客户进展</div>
                            <el-form-item @change="student_progress_change">
                                <el-select v-model="queryBox.progress" placeholder="请选择">
                                    <el-option
                                        v-for="item in student_progress_options"
                                        :key="item.value"
                                        :label="item.value"
                                        :value="item.key"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label prop="code">
                            <el-input v-model="queryBox.code" placeholder="客户编号">
                                <template slot="prepend">客户编号</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label prop="name">
                            <el-input v-model="queryBox.name" placeholder="学生名称">
                                <template slot="prepend">学生名称</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <el-form-item label prop="school">
                            <el-input v-model="queryBox.school" placeholder="学校名称">
                                <template slot="prepend">学校名称</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">被回收分中心</div>
                            <el-autocomplete
                                v-model="branchCenterName"
                                :fetch-suggestions="querySearchAsync"
                                placeholder="请输入内容"
                                @select="handleSelect"
                            ></el-autocomplete>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div class="depart-box">
                            <div class="slect-title">创建时间</div>
                            <el-date-picker
                                v-model="createDate"
                                type="daterange"
                                :start-placeholder="'开始时间'"
                                :end-placeholder="'结束时间'"
                                range-separator="至"
                                :default-time="['00:00:00', '23:59:59']"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="7">
                        <div class="depart-box">
                            <div class="slect-title">最新跟进时间</div>
                            <el-date-picker
                                v-model="trackingDate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div class="from-btns">
                <kt-button
                    :label="$t('action.reset')"
                    perms="true"
                    type="primary"
                    @click="reset('queryBox')"
                />
                <kt-button
                    :label="$t('action.search')"
                    perms="true"
                    type="primary"
                    @click="search"
                />
            </div>
        </div>
        <!-- 批量删除按钮 -->
        <div class="add-btns fl">
            <kt-button
                label="批量分配至总部"
                :disabled="this.selections.length===0"
                perms="customerownership:subcentercustomersea:batchdistribution"
                type="primary"
                @click="handlebatchdistribution"
            />
        </div>

        <!--表格内容栏-->
        <Crm-table
            @selectionChange="selectionChange"
            Subcentercustomersea
            permsSee="customerownership:subcentercustomersea:see"
            class="table-width"
            width="400"
            :loading="loading"
            :data="pageResult"
            :columns="columns"
            @findPage="findPage"
            @handleSee="handleSee"
        >
            <!-- <Crm-table @selectionChange="selectionChange" Subcentercustomersea check  showBatchDelete='false' class="table-width" width="400"
            :data="pageResult" :columns="columns">-->
            <!-- </Crm-table > -->
        </Crm-table>
        <!--批量分配-->
        <div class="batchdistribution-pop">
            <el-dialog
                :visible.sync="batchdistribution"
                @close="$emit('update:batchdistribution', false)"
                width="30%"
            >
                <el-row>
                    <el-col :span="24">
                        <span class="batchdistribution-pop-tit">客户分配</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <span class="checked-person">已经选择{{selections.length}}位客户</span>
                    </el-col>
                </el-row>
                <el-form :inline="true" :model="addstuformData" class="demo-form-inline">
                    <el-row>
                        <el-col :span="24">
                            <el-row>
                                <el-col :span="6">
                                    <span class="tit">划分方式：</span>
                                </el-col>
                                <el-col :span="18">
                                    <el-select
                                        clearable
                                        v-model="deptmodeoptionsValue"
                                        placeholder="请选择"
                                        @change="deptmodeoptionsChange"
                                    >
                                        <el-option
                                            v-for="item in deptmodeoptions"
                                            :key="item.index"
                                            :label="item.label"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:5%" v-if="isShowFlag==1||isShowFlag==2">
                        <el-col :span="24">
                            <el-row>
                                <el-col :span="6">
                                    <span class="tit">选择部门：</span>
                                </el-col>
                                <el-col :span="18">
                                    <popup-tree-input
                                        :data="deptData"
                                        :props="deptTree"
                                        :prop="deptinputValue"
                                        :currentChangeHandle="handleTreeSelectChange3Add"
                                    ></popup-tree-input>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:5%" v-if="isShowFlag==2">
                        <el-col :span="24">
                            <el-row>
                                <el-col :span="6">
                                    <span class="tit">人员选择：</span>
                                </el-col>
                                <el-col :span="18">
                                    <el-select
                                        clearable
                                        v-model="deptuseroptionValue"
                                        placeholder="请选择"
                                        @change="deptuserchange"
                                    >
                                        <el-option
                                            v-for="item in deptuseroption"
                                            :key="item"
                                            :label="item.realName"
                                            :value="item.id"
                                        ></el-option>
                                    </el-select>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="batchdistribution = false">取 消</el-button>
                    <el-button
                        type="primary"
                        v-if="isShowFlag==1"
                        @click="batchdistributionsubmitdept"
                    >确 定</el-button>
                    <el-button
                        type="primary"
                        v-if="isShowFlag==2"
                        @click="batchdistributionsubmituser"
                    >确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { CodeToText } from "element-china-area-data";
import axios from "axios";
export default {
    name: "Student",
    components: {
        PopupTreeInput,
        CrmTable,
        KtButton,
        CrmSwitch
    },
    data() {
        return {
            isShowFlag: 0, //0:初始化部门、人员不显示  1:部门显示 2：人员显示
            checkedPeson: 0,
            size: "small",
            // filters: {
            //   name: ""
            // },
            // 查询条件
            student_data_from_options: [
                {
                    label: " ",
                    key: " "
                }
            ],
            student_type_options: [],
            student_progress_options: [
                {
                    label: " ",
                    key: " "
                }
            ],
            student_student_data_from_type_options: [
                {
                    label: " ",
                    key: " "
                }
            ],
            // 客户类别
            companyCustomer_options: [
                {
                    key: "2",
                    value: "总部分配"
                },
                {
                    key: "3",
                    value: "OEM卡激活"
                }
            ],
            queryBox: {
                name: "",
                dataFrom: "",
                type: "",
                dataFromType: "",
                progress: "",
                code: "",
                phone: "",
                school: "",
                providerTeacher: "",
                providerAgent: "",
                createDate: "",
                moveDate: "",
                belongToPerson: "",
                pageNum: 0,
                pageSize: 0,
                importDepartment: ""
            },
            width: 200,
            columns: [
                { type: "index", label: "序号", minWidth: 50 },
                { prop: "code", label: "客户编号", minWidth: 150 },
                { prop: "name", label: "学生姓名", minWidth: 80 },
                { prop: "oemAccount", label: "OEM卡号", minWidth: 150 },
                { prop: "oemType", label: "OEM卡类别", minWidth: 100 },
                { prop: "school", label: "学校名称", minWidth: 100 },
                { prop: "laiyuan", label: "客户来源", minWidth: 100 },
                { prop: "getprogress", label: "客户进展", minWidth: 70 },
                { prop: "diqu", label: "地区", minWidth: 190 },
                { prop: "areaInput", label: "详细地址", minWidth: 120 },
                { prop: "brType", label: "客户类别", minWidth: 100 },
                { prop: "belongToPre", label: "被回收分中心", minWidth: 120 },
                { prop: "createDate", label: "创建时间", minWidth: 120 },
                { prop: "trackingDate", label: "最新跟进时间", minWidth: 120 }
            ],
            pageRequest: { pageNum: 1, pageSize: 8 },
            pageResult: {
                content: []
            },
            br_type_options: [],
            operation: true, // true:新增, false:编辑
            batchdistribution: false, //显示批量分配弹窗
            customerownership: false, //显示客户归属弹窗
            selectionsLength: "",
            deptTreeProps: {
                label: "name",
                children: "children"
            },
            roles: [],
            selections: [], //选中列表集合
            ids: [], //分配ID集合
            ids2: [],
            deptData: [], //部门树
            deptTree: {
                label: "deptName",
                children: "children"
            },
            deptinputValue: "",
            // 划分方式
            deptmodeoptions: [
                {
                    label: "分配至部门",
                    value: "11"
                },
                {
                    label: "分配至个人",
                    value: "9"
                }
            ],
            deptmodeoptionsValue: "",
            submitID: "",
            deptId: "",
            userID: "", //人员ID
            deptuseroption: [], //部门用户
            deptuseroptionValue: "",
            branchcenter: [], //分中心下拉
            branchcenterValue: "",
            branchcenterValueID: "",
            branchcenterCodeValue: "", //分中心编码
            addstuformData: {},
            // 分中心名称
            restaurants: [],
            branchCenterName: "",
            createDate: "",
            trackingDate: "",
            oemType: [],
            loading: false
        };
    },
    methods: {
        // 搜索
        search() {
            this.loading = true;
            this.queryBox.createDateStart = this.createDate[0];
            this.queryBox.createDateEnd = this.createDate[1];
            this.queryBox.trackingDateStart = this.trackingDate[0];
            this.queryBox.trackingDateEnd = this.trackingDate[1];
            this.pageRequest.pageNum = 1;
            this.findPage(null);
        },
        // 获取分页数据
        findPage: function(data) {
            if (data !== null) {
                this.loading = true;
                this.pageRequest = data.pageRequest;
            }
            this.queryBox.pageSize = this.pageRequest.pageSize;
            this.queryBox.pageNum = this.pageRequest.pageNum;
            this.$api.student
                .studentQuerybrCustomerSea(this.queryBox)
                .then(res => {
                    let content = {
                        content: res.listStudentInfo,
                        totalSize: res.total
                    };
                    this.pageResult = content;
                    this.pageResult.content.forEach(item => {
                        if (
                            (item.province === null && item.city == null) ||
                            (item.province === "null" && item.city == "null")
                        ) {
                            item.diqu = "";
                        } else {
                            item.diqu =
                                CodeToText[item.province] +
                                CodeToText[item.city] +
                                CodeToText[item.area] +
                                (item.areaInput == null ? "" : item.areaInput);
                        }
                        this.student_data_from_options.forEach(type_item => {
                            if (type_item.key == item.dataFrom) {
                                item.laiyuan = type_item.value;
                            }
                        });
                        this.student_progress_options.forEach(progress_item => {
                            if (progress_item.key == item.progress) {
                                item.getprogress = progress_item.value;
                            }
                        });
                        // 转换客户类别
                        this.br_type_options.forEach(Citem => {
                            if (Citem.key == item.brType) {
                                item.brType = Citem.value;
                            }
                        });
                        // OEM卡类型
                        this.oemType.forEach(oemItem => {
                            if (oemItem.key == item.oemType) {
                                item.oemType = oemItem.value;
                            }
                        });
                    });
                    this.loading = false;
                })
                .then(data != null ? data.callback : "");
        },
        // 加载用户角色信息
        // findUserRoles: function() {
        //   this.$api.role.findAll().then(res => {
        //     // 加载角色集合
        //     this.roles = res.data;
        //   });
        // },
        // 重置
        reset(queryBox) {
            this.$refs.queryBox.resetFields();
            this.queryBox.type = "";
            this.queryBox.dataFrom = "";
            this.queryBox.progress = "";
            this.queryBox.providerAgent = "";
            this.queryBox.dataFromType = "";
            this.queryBox.brType = "";
            this.branchCenterName = "";
            this.queryBox.createDateStart = "";
            this.createDate = "";
            this.queryBox.createDateEnd = "";
            this.trackingDate = "";
            this.queryBox.trackingDateStart = "";
            this.pageRequest.pageNum = 1;
            this.queryBox.trackingDateEnd = "";
            this.findPage(null);
        },
        // 批量分配
        handlebatchdistribution(params) {
            this.batchdistribution = true;
            this.ids = [];
            let idstu = this.selections.map(item => item.id);
            // this.dataFormAdd = Object.assign({}, params.row);
            this.ids = idstu;
            this.deptmodeoptionsValue = "";
            this.deptinputValue = "";
            this.deptuseroptionValue = "";
            this.isShowFlag = 0;
        },
        // 批量分配分总部
        batchdistributionsubmit() {
            this.$api.user
                .studentAssign_customerManager({
                    listStudentId: this.ids,
                    belongType: 7,
                    belongTo: this.branchcenterValueID
                })
                .then(res => {
                    if (res.result === 1) {
                        this.$message({
                            message: res.msg,
                            type: "success"
                        });
                        this.batchdistribution = false;
                        this.findPage(null);
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "success"
                        });
                    }
                });
        },
        // 批量分配至总部 部门
        batchdistributionsubmitdept() {
            this.$api.user
                .studentAssign_customerManager({
                    listStudentId: this.ids,
                    belongType: 11,
                    belongTo: this.deptId
                })
                .then(res => {
                    if (res.result === 1) {
                        this.$message({
                            message: res.msg,
                            type: "success"
                        });
                        this.batchdistribution = false;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "success"
                        });
                    }
                });
        },
        // 批量分配到总部个人
        batchdistributionsubmituser() {
            this.$api.user
                .studentAssign_customerManager({
                    listStudentId: this.ids,
                    belongType: 9,
                    belongTo: this.userID
                })
                .then(res => {
                    if (res.result === 1) {
                        this.$message({
                            message: res.msg,
                            type: "success"
                        });
                        this.batchdistribution = false;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "success"
                        });
                    }
                });
        },
        // 获取分中心
        get_branchcenter() {
            this.$api.dropdown.branchcenter().then(res => {
                this.branchcenter = res.branchCenterInfoList;
            });
        },
        branchcenterChange(value) {
            this.branchcenterValue = value.name;
            this.branchcenterCodeValue = value.code;
            this.branchcenterValueID = value.id;
        },
        // 查看客户档案
        handleSee: function(params) {
            this.dataForm = Object.assign({}, params.row);
            // console.log(params.row)
            this.$router.push({
                path: "/Customerfile/Student",
                query: {
                    id: this.dataForm.id
                }
            });
        },
        // 新增客户
        handleNewADD: function() {
            this.$router.push({
                path: "/Customerfile/AddStudent"
            });
        },
        selectionChange: function(params) {
            let selectionsLength = params.selections.length;
            this.selections = selections.selections;
        },
        // 获取选中的表格数据
        selectionChange: function(selections) {
            this.selections = selections.selections;
        },
        // 修改客户档案
        handleEdit: function(params) {
            this.dataForm = Object.assign({}, params.row);
            // console.log(params.row)
            this.$router.push({
                path: "/Customerfile/EditStudent",
                query: {
                    id: this.dataForm.id
                }
            });
        },
        // 菜单树选中
        handleOptionClick() {},
        // 获取来源
        get_student_data_from() {
            this.$api.user
                .optionsList({ codeType: "student_data_from" })
                .then(res => {
                    this.student_data_from_options = res.keyValueList;
                });
        },
        get_student_progress() {
            this.$api.user
                .optionsList({ codeType: "student_progress" })
                .then(res => {
                    this.student_progress_options = res.keyValueList;
                });
        },
        student_progress_change(value) {
            this.queryBox.student_progressValue = value.toString();
        },
        // 获取部门数据
        get_dept_data() {
            this.$api.dropdown.deptLevel3().then(res => {
                this.deptData = res.departmentInfoList;
            });
        },
        // 点击部门
        handleTreeSelectChange3Add(data, node) {
            this.deptinputValue = data.deptName;
            this.deptId = data.id;
            this.deptuseroptionValue = "";
            this.get_dept_user();
        },
        //划分方式 控制部门人员显示
        deptmodeoptionsChange(value) {
            console.log(value);
            if (value == 9) {
                this.isShowFlag = 2;
            } else if (value == 11) {
                this.isShowFlag = 1;
            } else {
                this.isShowFlag = 0;
            }
        },
        // 获取部门用户
        get_dept_user() {
            this.$api.student
                .queryUserList({
                    threeLevelDeptId: this.deptId,
                    accountStatus: 1,
                    isControlResource: 1
                })
                .then(res => {
                    this.deptuseroption = res.userInfoList;
                    // this.userID=res.userInfoList.id
                    console.log(res);
                });
        },
        deptuserchange(value) {
            this.userID = value;
        },
        get_student_type() {
            this.$api.user
                .optionsList({ codeType: "student_type" })
                .then(res => {
                    this.student_type_options = res.keyValueList;
                });
            this.$api.user
                .optionsList({ codeType: "student_br_type" })
                .then(res => {
                    this.br_type_options = res.keyValueList;
                });
            this.oemType = JSON.parse(localStorage.getItem("oemType"));
        },
        student_parent_type_change(value) {
            this.info.studentInfoDetail.studentInfoAttr.parentType = value.toString();
        },
        // 解锁锁定
        changeSwitch: function(data) {
            console.log(data);
            this.$api.student
                .studentInfoLock({
                    studentId: data.row.id,
                    isLock: data.row.isLock
                })
                .then(res => {
                    if (res.result == 1) {
                        this.$message({ message: res.msg, type: "success" });
                    } else {
                        this.$message({ message: res.msg, type: "error" });
                    }
                    this.findPage(null);
                });
        },
        // 分中心远程搜索
        querySearchAsync(queryString, callback) {
            let restaurants = [{}];
            let results = "";
            this.$api.dropdown.branchcenter().then(res => {
                for (let i of res.branchCenterInfoList) {
                    i.value = i.name; //将想要展示的数据作为value
                }
                restaurants = res.branchCenterInfoList;
                results = queryString
                    ? restaurants.filter(this.createFilter(queryString))
                    : restaurants;
                callback(results);
            });
        },
        createFilter(queryString) {
            return restaurant => {
                return (
                    restaurant.name
                        .toLowerCase()
                        .indexOf(queryString.toLowerCase()) === 0
                );
            };
        },
        handleSelect(item) {
            this.queryBox.belongToPre = item.id;
        }
    },
    mounted() {
        this.get_student_data_from();
        this.get_student_progress();
        this.get_dept_data();
        this.get_branchcenter();
        this.get_student_type();
    }
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>
<style lang='scss' scoped>
.checked-person {
    font-weight: 500;
    display: inline-block;
    text-align: center;
    margin: 3% 0 3% 0;
}
.batchdistribution-pop-tit {
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    color: #303133;
}
.demo-form-inline {
    width: 90%;
    margin: 0 auto;
    .el-dialog__body .el-input {
        width: 93% !important;
    }
    .el-select {
        width: 100% !important;
    }
    .tit {
        display: inline-block;
        margin-top: 10%;
    }
}
</style>
<style lang='scss'>
.batchdistribution-pop .el-dialog__header {
    padding: 0 0 0 0 !important;
}
</style>


